/**危险性分析列表页面 */
<template>
 <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.nodeFunction" placeholder="节点功能" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.nodeRange" placeholder="节点范围" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.drawNumber" placeholder="节点涉及图纸号及其版本" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-clean" @click="handleReset">
        重置
      </el-button>
     
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button>
     </div> 

    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
      <el-table-column v-if="hidden" min-width="200px" label="采纳报告书">
        <template slot-scope="scope">
          <span>{{ scope.row.adoptId.id }}</span></template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="节点序号" prop="id" />
      <el-table-column min-width="150px" label="节点功能">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.nodeFunction }}</span></template>
      </el-table-column>
      <el-table-column min-width="150px" label="节点范围">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.nodeRange }}</span></template>
      </el-table-column>
      <el-table-column min-width="150px" label="图纸号及其版本">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.drawNumber }}</span></template>
      </el-table-column>
      <el-table-column min-width="150px" label="分析日期">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.analysisDate }}</span></template>
      </el-table-column>
      
      <el-table-column min-width="150px" label="采纳情况">
        <template slot-scope="scope">
          <span @click="handleAdopt(scope.row)" v-if="scope.row.adoptId==null || scope.row.adoptId.isAdopt==0" style="color:green;">未处理</span>
          <span @click="handleAdopt(scope.row)" v-if="scope.row.adoptId!=null && scope.row.adoptId.isAdopt==3" style="color:blue;">审批中.. </span>
          <span @click="handleAdopt(scope.row)" v-if="scope.row.adoptId!=null && scope.row.adoptId.isAdopt==-1" style="color:orange;">驳回</span>
          <span @click="handleAdopt(scope.row)" v-if="scope.row.adoptId!=null && scope.row.adoptId.isAdopt==1" style="color:red;" >采纳</span>
          <span @click="handleAdopt(scope.row)" v-if="scope.row.adoptId!=null && scope.row.adoptId.isAdopt==2" style="color:red;">不采纳</span></template>
      </el-table-column>
      <el-table-column min-width="150px" label="整改情况">
        <template slot-scope="scope">
          <span @click="handleRectification(scope.row)" v-if="scope.row.rectificationId==null || scope.row.rectificationId.rectifySituation==0" style="color:green;">未整改</span>
          <span @click="handleRectification(scope.row)" v-if="scope.row.rectificationId!=null && scope.row.rectificationId.rectifySituation==-1" style="color:orange;">驳回</span>
          <span @click="handleRectification(scope.row)" v-if="scope.row.rectificationId!=null && scope.row.rectificationId.rectifySituation==1" style="color:red;">整改完成</span>
          <span @click="handleRectification(scope.row)" v-if="scope.row.rectificationId!=null && scope.row.rectificationId.rectifySituation==2" style="color:blue;">审批中..</span></template>
      </el-table-column>
      
      <el-table-column min-width="150px" label="相关Team">
        <template slot-scope="scope">
          <span >{{ scope.row.deptId.deptName }}</span></template>
      </el-table-column>
      
      <el-table-column align="center" label="操作" width="230">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fechData" />

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="90%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
        <el-form-item v-if="hidden" label="节点序号" prop="id">
          <el-input v-model="temp.id" readonly />
        </el-form-item>

        <el-form-item label="节点功能" :required="!isRequired" prop="nodeFunction" >
          <el-input v-model="temp.nodeFunction" />
        </el-form-item>
        <el-form-item label="节点范围" :required="!isRequired" prop="nodeRange">
          <el-input v-model="temp.nodeRange" />
        </el-form-item>
        <el-form-item label="图纸号及其版本" :required="!isRequired" prop="drawNumber">
          <el-input v-model="temp.drawNumber" />
        </el-form-item>
       <el-form-item label="分析日期" :required="!isRequired" prop="analysisDate">
           <el-date-picker v-model="temp.analysisDate" type="datetime" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择一个日期" />
        </el-form-item>
       
        <el-form-item label="相关Team"  :required="!isRequired">
          <el-select v-model="deptName1" class="filter-item" placeholder="请选择">
            <el-option v-for="item in deptlist" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="流量" :required="!isRequired" prop="flow">
          <el-input v-model="temp.flow" />
        </el-form-item>
        <el-form-item label="设计最大/最小压力" :required="!isRequired" prop="designPressure">
          <el-input v-model="temp.designPressure" />
        </el-form-item>
        <el-form-item label="操作压力" :required="!isRequired" prop="operatePressure">
          <el-input v-model="temp.operatePressure" />
        </el-form-item>
        <el-form-item label="设计最高/最低温度" :required="!isRequired" prop="designTemperature">
          <el-input v-model="temp.designTemperature" />
        </el-form-item>
        <el-form-item label="操作温度" :required="!isRequired" prop="operateTemperature">
          <el-input v-model="temp.operateTemperature" />
        </el-form-item>
        <el-form-item label="主席" :required="!isRequired">
          <el-autocomplete
            v-model="userName1"
            class="el-input"
            :fetch-suggestions="userSearchAsyncC"
            placeholder="请输入工号"
            :trigger-on-focus="false"
            @select="handleSelectC"
          />
        </el-form-item>
        <el-form-item label="记录员"  :required="!isRequired">
          <el-autocomplete
            v-model="userName2"
            class="el-input"
            :fetch-suggestions="userSearchAsyncR"
            placeholder="请输入工号"
            :trigger-on-focus="false"
            @select="handleSelectR"
          />
        </el-form-item>
        <el-form-item label="参加人员" prop="participants">
          <el-input v-model="temp.participants" />
        </el-form-item>
        </el-form>

    <el-button type="primary" @click="handleCreateDetail">新增</el-button>
      <el-table :data="detailList">
        <el-table-column v-if="hidden" align="center" label="deleted" prop="deleted" />
        <el-table-column align="center" label="编号" prop="id" />
        <el-table-column style="width: 10%" align="center" label="分析对象">
          <template slot-scope="scope">
            <el-input v-model="scope.row.analysisTarget" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="引导词">
          <template slot-scope="scope">
            <el-input v-model="scope.row.introducer" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="偏差">
          <template slot-scope="scope">
            <el-input v-model="scope.row.deflection" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="发生原因">
          <template slot-scope="scope">
            <el-input v-model="scope.row.reason" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="产生后果">
          <template slot-scope="scope">
            <el-input v-model="scope.row.consequence" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始严重性">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innitialSerionsness" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始可能性">
          <template slot-scope="scope">
            <el-input v-model="scope.row.initialPossibility" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始风险度">
          <template slot-scope="scope">
            <el-input v-model="scope.row.initialRisk" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="已有防护措施">
          <template slot-scope="scope">
            <el-input v-model="scope.row.existMeasure" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余可能性1">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusPossibility1" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余风险度1">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusRisk1" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="建议措施">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestMeasure" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余可能性2">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusPossibility2" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余风险度2">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusRisk2" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="建议项分类">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestItemClassification" type="text" />
          </template> 
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitData">
          确认
        </el-button>
      </div>
    </el-dialog>

     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailVisible" width="90%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
        <el-form-item v-if="hidden" label="节点序号" prop="id">
          <el-input v-model="temp.id" readonly />
        </el-form-item>
        <el-form-item label="节点功能" prop="nodeFunction">
          <el-input v-model="temp.nodeFunction" />
        </el-form-item>
        <el-form-item label="节点范围" prop="nodeRange">
          <el-input v-model="temp.nodeRange" />
        </el-form-item>
        <el-form-item label="图纸号及其版本" prop="drawNumber">
          <el-input v-model="temp.drawNumber" />
        </el-form-item>
       <el-form-item label="分析日期" prop="analysisDate">
           <el-date-picker v-model="temp.analysisDate" type="datetime" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择一个日期" />
        </el-form-item>
        <el-form-item label="相关Team" prop="deptId">
          <el-select v-model="deptName1" class="filter-item" placeholder="请选择">
            <el-option v-for="item in deptlist" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="流量" prop="flow">
          <el-input v-model="temp.flow" />
        </el-form-item>
        <el-form-item label="设计最大/最小压力" prop="designPressure">
          <el-input v-model="temp.designPressure" />
        </el-form-item>
        <el-form-item label="操作压力" prop="operatePressure">
          <el-input v-model="temp.operatePressure" />
        </el-form-item>
        <el-form-item label="设计最高/最低温度" prop="designTemperature">
          <el-input v-model="temp.designTemperature" />
        </el-form-item>
        <el-form-item label="操作温度" prop="operateTemperature">
          <el-input v-model="temp.operateTemperature" />
        </el-form-item>
        <el-form-item label="主席" prop="chairman">
          <el-autocomplete
            v-model="userName1"
            class="el-input"
            :fetch-suggestions="userSearchAsyncC"
            placeholder="请输入工号"
            :trigger-on-focus="false"
            @select="handleSelectC"
          />
        </el-form-item>
        <el-form-item label="记录员" prop="recoder">
          <el-autocomplete
            v-model="userName2"
            class="el-input"
            :fetch-suggestions="userSearchAsyncR"
            placeholder="请输入工号"
            :trigger-on-focus="false"
            @select="handleSelectR"
          />
        </el-form-item>
        <el-form-item label="参加人员" prop="participants">
          <el-input v-model="temp.participants" />
        </el-form-item>
        </el-form>
      <el-table :data="detailList">
        <el-table-column v-if="hidden" align="center" label="deleted" prop="deleted" />
        <el-table-column align="center" label="编号" prop="id" />
        <el-table-column style="width: 10%" align="center" label="分析对象">
          <template slot-scope="scope">
            <el-input v-model="scope.row.analysisTarget" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="引导词">
          <template slot-scope="scope">
            <el-input v-model="scope.row.introducer" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="偏差">
          <template slot-scope="scope">
            <el-input v-model="scope.row.deflection" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="发生原因">
          <template slot-scope="scope">
            <el-input v-model="scope.row.reason" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="产生后果">
          <template slot-scope="scope">
            <el-input v-model="scope.row.consequence" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始严重性">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innitialSerionsness" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始可能性">
          <template slot-scope="scope">
            <el-input v-model="scope.row.initialPossibility" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="初始风险度">
          <template slot-scope="scope">
            <el-input v-model="scope.row.initialRisk" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="已有防护措施">
          <template slot-scope="scope">
            <el-input v-model="scope.row.existMeasure" type="text" />
          </template> 
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余可能性1">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusPossibility1" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余风险度1">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusRisk1" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="建议措施">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestMeasure" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余可能性2">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusPossibility2" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="剩余风险度2">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surplusRisk2" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="建议项分类">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestItemClassification" type="text" />
          </template> 
        </el-table-column>
      </el-table>
    </el-dialog>

 </div> 
</template>

<script>
import { hazopList, addHazop, editHazop, deleteHazop, fetchAllCount, getPersonList, getDeptList, hazopDetailList } from '@/api/hazop'
import Sortable from 'sortablejs'
import { parseTime } from '@/utils'
import Vue from 'vue'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { getuserbyemp } from '@/api/user'
import checkPermission from '@/utils/permission'
export default {
  name: 'Hazop',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      isRequired: false,
      hidden: false,
      list: null,
      total: 0,
      listLoading: true,
      editList: null,
      deptName1: null,
      userName1: null,
      userName2: null,
      adoptId: null,
      sortable: null,
      oldList: [],
      newList: [],
      // 参数条件
      listQuery: {
        page: 1,
        limit: 20,
        id: null
        // nodeFunction: null,
        // nodeRange: null,
        // drawNumber: null
      },
      personlist: null,
      deptlist: null,
      temp: {
        id: undefined,
        adoptId: null,
        nodeFunction: '',
        nodeRange: '',
        drawNumber: '',
        analysisDate: '',
        deptId: '',
        chairman: '',
        recoder: '',
        flow: '',
        designPressure: '',
        designTemperature: '',
        operateTemperature: '',
        participants: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      dialogDetailVisible: false,
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '明细'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'analysisDate', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
       },
      downloadLoading: false,
      // 查看明细行数据
      detailList: []
    }
  },
  created() {
    this.fechData()
  },
  methods: {
    fechData() {
      getPersonList().then(response => {
        this.personlist = response.listName
      })
      getDeptList().then(response => {
        this.deptlist = response.listName
      })
      fetchAllCount().then(response => {
        this.total = response.count
      })
      hazopList(this.listQuery).then(response => {
        this.listLoading = true
        this.list = response.ehsHazopAnalysisList
        this.showList = response.ehsHazopAnalysisList
        this.listLoading = false
      })
    },
   
    handleCreate() {
      this.resetTemp()
      let row = {
        id: '',
        contractorName: '',
        contractorNo: ''
      }
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1)
      this.temp.timestamp = new Date(this.temp.timestamp)

      this.detailList = []
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const userName1 = this.userName1
          const userName2 = this.userName2
          const userId1 = this.userId1
          const userId2 = this.userId2
          const deptName1 = this.deptName1
          const details = this.detailList
          if(deptName1 == null){
            alert("提示：相关Team不能为空")
          } else if(userName1 == null){
            alert("提示：主席不能为空")
          } else if(userName2 == null){
            alert("提示：记录员不能为空")
          } else{
          this.temp.author = 'vue-element-admin'
          const data =
          {
            usr1: {
              userName: userName1,
              userId: userId1
            },
            usr2: {
              userName: userName2,
              userId: userId2
            },
            dept1: {
              deptName: deptName1,
            },
            ehsHazopAnalysis: {
            nodeFunction: this.temp.nodeFunction,
            nodeRange: this.temp.nodeRange,
            drawNumber: this.temp.drawNumber,
            analysisDate: this.temp.analysisDate,
            flow: this.temp.flow,
            designPressure: this.temp.designPressure,
            operatePressure: this.temp.operatePressure,
            designTemperature: this.temp.designTemperature,
            operateTemperature: this.temp.operateTemperature, 
            participants: this.temp.participants,
            details: details }
          }
            addHazop(data).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
            this.fechData()
          })
          }
        }
      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        nodeFunction: '',
        nodeRange: '',
        drawNumber: '',
        analysisDate: '',
        deptId: '',
        chairman: '',
        recoder: '',
        flow: '',
        designPressure: '',
        designTemperature: '',
        operateTemperature: '',
        participants: ''
      }
    },
    // 主席
    async userSearchAsyncC(queryString, callback) {
      var list = []
      const { userList } = await getuserbyemp(queryString)
      userList.forEach(r => {
        var tem_obj = {}
        tem_obj.value = r.empNo + '-' + r.userName + '-' + r.userId
        tem_obj.userId = r.userId
        tem_obj.userName = r.userName
        list.push(tem_obj)
      })

      callback(list)
    },
    async handleSelectC(u) {
      this.userName1 = u.userName + ''
      this.userId1 = u.userId + ''
    },

    // 记录员
    async userSearchAsyncR(queryString, callback) {
      var list = []
      const { userList } = await getuserbyemp(queryString)
      userList.forEach(r => {
        var tem_obj = {}
        tem_obj.value = r.empNo + '-' + r.userName + '-' + r.userId
        tem_obj.userId = r.userId
        tem_obj.userName = r.userName
        list.push(tem_obj)
      })

      callback(list)
    },
    async handleSelectR(u) {
      this.userName2 = u.userName + ''
      this.userId2 = u.userId + ''
    },

    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['节点序号', '节点功能', '节点范围', '图纸及其版本', '分析日期', '采纳情况', '整改情况', '相关Team']
        const filterVal = ['id', 'nodeFunction', 'nodeRange', 'drawNumber', 'analysisDate', 'adoptId', 'rectificationId', 'deptId']

        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } if (j === 'analysisDate') {
          return parseTime(v[j])
        } if (j === 'adoptId') {
          if(v[j] != null){
            return v[j].isAdopt
          }
        } if (j === 'rectificationId') {
          if(v[j] != null){
           return v[j].rectifySituation
          }
        }
        if (j === 'deptId') {
          return v[j].deptName
        } else {
          return v[j]
        }
      }))
    },

    handleReset() {
      this.listQuery = {
        
      }
    },
    showReviewer() {

    },
    handleFilter() {
      this.listQuery.page = 1
      this.fechData()
    },
    
    handleDelete(row) {
      // eslint-disable-next-line no-lone-blocks
      {
        this.$confirm('确定删除?', 'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            deleteHazop(row.id).then(response => {
            })
            this.fechData()
            this.$message({
              type: 'success',
              message: 'Delete succed!'
            })
          })
          .catch(err => { console.error(err) })
      }
    },

    handleEdit(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1)
      
      this.userName1 = this.temp.chairman.userName
      this.userId1 = this.temp.chairman.userId
      this.userName2 = this.temp.recoder.userName
      this.userId2 = this.temp.recoder.userId
      this.deptName1 = this.temp.deptId.deptName
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.detailList = []
      this.dialogStatus = 'edit'
      this.dialogFormVisible = true
      this.listQuery.id = this.temp.id
      hazopDetailList(this.listQuery).then(response => {
        this.listLoading = true
        this.detailList = response.ehsHazopAnalysisDetailList
        this.listLoading = false
      })
      this.$nextTick(() => {
      this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            
            const data = { 
            usr1: {
              userName: this.userName1,
              userId: this.userId1,
            },
            usr2: {
              userName: this.userName2,
              userId: this.userId2,
            },
            dept1: {
              deptName: this.deptName1,
            },
            ehsHazopAnalysis: {
              id: this.temp.id,
              nodeFunction: this.temp.nodeFunction,
              nodeRange: this.temp.nodeRange,
              drawNumber: this.temp.drawNumber,
              analysisDate: this.temp.analysisDate,
              flow: this.temp.flow,
              designPressure: this.temp.designPressure,
              operatePressure: this.temp.operatePressure,
              designTemperature: this.temp.designTemperature,
              operateTemperature: this.temp.operateTemperature, 
              participants: this.temp.participants,
              details: this.detailList }
              }
              editHazop(data).then(response => {
              this.dialogFormVisible = false
              this.$notify({
              title: 'Success',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            // 刷新页面
            this.fechData()
            })
          }
        })
    },
    handleDetail(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1)
      this.userName1 = this.temp.chairman.userName
      this.userName2 = this.temp.recoder.userName
      this.deptName1 = this.temp.deptId.deptName
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'detail'
      this.dialogDetailVisible = true
      this.$nextTick(() => {
      this.$refs['dataForm'].clearValidate()
      this.listQuery.id = this.temp.id
      hazopDetailList(this.listQuery).then(response => {
        this.listLoading = true
        this.detailList = response.ehsHazopAnalysisDetailList
        this.listLoading = false
      })
      })
    },

    // 验证提交数据
    verifyData() {
      // 判断detailList是否为空
      var flagAllName = true; var flagAllRange = true; var flagAllNo = true; var flagAllDate = true; 
      var flagNo = true; var flagName = true; var flagAge = true; var flagType = true
      if (this.temp.nodeFunction == '' || this.temp.nodeFunction == null) {
        flagAllName = false
      }
      if (this.temp.nodeRange == '' || this.temp.nodeRange == null) {
        flagAllRange = false
      }
      if (this.temp.drawNumber == '' || this.temp.drawNumber == null) {
        flagAllNo = false
      }
      if (this.temp.analysisDate == '' || this.temp.analysisDate == null) {
        flagAllDate = false
      }
      for (var item of this.detailList) {
        if (item.analysisTarget == '') {
          flagNo = false
        }
        if (item.deflection == '') {
          flagName = false
        }
        if (item.reason == '') {
          flagAge = false
        }
        if (item.consequence == '') {
          flagType = false
        }
      }
      var msg = ''
      msg += flagAllName == false ? '节点功能,' : ''
      msg += flagAllRange == false ? '节点范围,' : ''
      msg += flagAllNo == false ? '图纸号及其版本,' : ''
      msg += flagAllDate == false ? '分析日期,' : ''
      msg += flagNo == false ? '分析对象,' : ''
      msg += flagName == false ? '偏差,' : ''
      msg += flagAge == false ? '发生原因,' : ''
      msg += flagType == false ? '产生后果' : ''
      msg += '不可以为空'
      if (!flagAllName || !flagAllRange || !flagAllNo || !flagAllDate || !flagNo || !flagName || !flagAge || !flagType) {
        this.$notify({
          title: '提示',
          message: msg,
          type: 'warning',
          duration: 2000
        })
        return false
      } else {
        return true
      }
    },
    // 提交操作
    submitData() {
      if (this.verifyData() && this.dialogStatus === 'create') {
        this.createData()
      } else if (this.verifyData() && this.dialogStatus === 'edit') {
        this.updateData()
      }
    },
    //新增明细行
    handleCreateDetail() {
      const detailListDefault = {
        id: undefined,
        analysisTarget: '',
        introducer: '',
        deflection: '',
        reason: '',
        consequence: '',
        innitialSerionsness: '',
        initialPossibility: '',
        initialRisk: '',
        existMeasure: '',
        surplusPossibility1: '',
        surplusRisk1: '',
        suggestMeasure: '',
        surplusPossibility2: '',
        surplusRisk2: '',
        suggestItemClassification: ''
      }
      Vue.set(this.detailList, this.detailList.length, detailListDefault)
    },

   //删除明细行
    deleteRow(n) {
      Vue.delete(this.detailList, n)
    },

    handleAdopt(row) {
      // 指定跳转地址
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1)
      this.nodeId = this.temp.id
      this.$router.replace('/hazop/adoptList?nodeId=' + this.nodeId)
    },

    handleRectification(row) {
      // 指定跳转地址
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1)
      this.nodeId = this.temp.id
      this.adoptId = this.temp.adoptId.id
      this.adoptInfo = this.temp.adoptId.isAdopt
      if(this.adoptInfo == 1){
        this.$router.replace('/hazop/rectificationList?nodeId=' + this.nodeId + '&adoptId=' + this.adoptId + '&adoptInfo=' + this.adoptInfo)
      }
      
    },

    setSort() {
      const el = this.list[0]

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)

          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
